import React, { Component } from 'react';
import { Layout,Avatar,Menu,Popover,Input,Button } from 'antd';
import './App.css';
import {
  AppstoreOutlined,
  MenuUnfoldOutlined,
  MenuFoldOutlined,
  PieChartOutlined,
  DesktopOutlined,
  ContainerOutlined,
  MailOutlined,
  UserOutlined
} from '@ant-design/icons';
import axios from 'axios';

const { SubMenu } = Menu;

const { Header, Sider, Content } = Layout;
const content = (
    <div>
      <p>Content</p>
      <p>Content</p>
    </div>
  );

class App extends Component {
    state = {
        types:[],
        pagenum:1,
        limit:2,
        key:'',
        list:[],  //文章列表
        total:0
    }
    componentDidMount(){
        //获取分类
        axios.get('/api/types').then(res => {
            if(res.data.code === 1){
                this.setState({
                    types:res.data.data
                })
            }
        })
        this.getList()
       
    }

    getList = () => {
        let {pagenum,limit,key} = this.state;
         //获取文章
         axios.get('/api/articalList',{params:{pagenum,limit,key}}).then(res => {
            if(res.data.code === 1){
                this.setState({
                    list:res.data.data,
                    total:res.data.total
                })
            }
        })
    }
    render() {
        let {types,list,key,total,limit} = this.state;
        return (
            <Layout>
                <Sider>
                    <Menu
                        defaultSelectedKeys={['1']}
                        defaultOpenKeys={['sub1']}
                        mode="inline"
                        theme="dark"
                        >
                        <Menu.Item key="1" icon={<PieChartOutlined />}>
                            Option 1
                        </Menu.Item>
                        <Menu.Item key="2" icon={<DesktopOutlined />}>
                            Option 2
                        </Menu.Item>
                        <Menu.Item key="3" icon={<ContainerOutlined />}>
                            Option 3
                        </Menu.Item>
                        <SubMenu key="sub1" icon={<MailOutlined />} title="Navigation One">
                            <Menu.Item key="5">Option 5</Menu.Item>
                            <Menu.Item key="6">Option 6</Menu.Item>
                            <Menu.Item key="7">Option 7</Menu.Item>
                            <Menu.Item key="8">Option 8</Menu.Item>
                        </SubMenu>
                        <SubMenu key="sub2" icon={<AppstoreOutlined />} title="Navigation Two">
                            <Menu.Item key="9">Option 9</Menu.Item>
                            <Menu.Item key="10">Option 10</Menu.Item>
                            <SubMenu key="sub3" title="Submenu">
                            <Menu.Item key="11">Option 11</Menu.Item>
                            <Menu.Item key="12">Option 12</Menu.Item>
                            </SubMenu>
                        </SubMenu>
                    </Menu>
                </Sider>
                <Layout>
                    <Header>
                    <Popover placement="bottom" title={'text'} content={content} trigger="click">
                        <Avatar size={34} icon={<UserOutlined />} />
                    </Popover>
                        
                    </Header>
                    <Content>
                        <div>
                            <Input value={key} onChange={this.change}></Input>
                            <Button onClick={this.getList}>搜索</Button>
                        </div>
                        <ul>
                            {types.map(type => <li key={type.id} onClick={()=>this.filterType(type.id)}>{type.typename}</li>)}
                        </ul>
                        <div>
                            {list.map((item,index) => <div key={item.id}>
                                <h6>{index+1}{item.title}</h6>
                                <div>{item.con}</div>
                                <span>{item.username}</span>
                            </div>)}
                            {total/limit > 1 && total != list.length? <Button onClick={this.more}>更多</Button> :<></>}
                        </div>
                    </Content>
                </Layout>
            </Layout>
        );
    }
    //按类目筛选
    filterType = (id) => {
        axios.get('/api/articalTypeList',{params:{type:id}}).then(res => {
            if(res.data.code === 1){
                this.setState({
                    list:res.data.data
                })
            }
        })
    }
    change = (e) => {
        this.setState({
            key:e.target.value
        })
    }
    more = () => {
        //pagenum + 1
        this.setState({
            pagenum:this.state.pagenum+1
        },() => {
            let  {pagenum,limit,key} = this.state;
            axios.get('/api/articalList',{params:{pagenum,limit,key}}).then(res => {
                let list = [...this.state.list,...res.data.data];
                if(res.data.code === 1){
                    this.setState({
                        list,
                        total:res.data.total
                    })
                }
            })
        })
    }
}

export default App;